<template>
    <div class="add-address">
      <div class="title">
        <el-button
          type="success"
          style="margin-top: 10px"
          v-if="allIntentionData.length > 0"
          @click="lookIntention"
        >我的融资意向</el-button>
      </div>
      <div v-if="look">
        <div
          v-for="(item, index) in allIntentionData"
          :key="index"
          class="default-address-container"
        >
          <div>
            <div class="address-item">姓名：{{ item.realName }}</div>
            <div class="address-item">地址：{{ item.address }}</div>
            <div class="address-item">联系方式：{{ item.phone }}</div>
            <div class="address-item">金额：{{ item.amount }} (单位：元)</div>
            <div class="address-item">用途：{{ item.application }}</div>
            <div class="address-item">农作物名称：{{ item.item }}</div>
            <div class="address-item">种植面积：{{ item.area }} (单位：亩)</div>
            <div class="address-item">意向借款期：{{ item.repaymentPeriod }} (单位：月)</div>
          </div>
          <div class="right-btn">
            <div
              class="marginR20"
              @click="handleEdit(item)"
            >编辑</div>
            <div
              class="marginR20"
              @click="handleDel(item)"
            >删除</div>
          </div>
        </div>
      </div>
  
      <el-button
        type="success"
        style="margin-top: 10px"
        v-if="allIntentionData.length === 0"
        @click="handleAdd"
      >添加融资意向</el-button>
  
      <el-dialog
        :title="title"
        v-model="showAdd"
        width="580px"
        :before-close="closeAdd"
        class="bgc-white"
      >
        <el-form
          :model="intentionData"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="姓名：" prop="realName">
            <el-input v-model="intentionData.realName"></el-input>
          </el-form-item>
          <el-form-item label="金额(单位：元)：" prop="amount">
            <el-input v-model.number="intentionData.amount"></el-input>
          </el-form-item>
          <el-form-item label="联系方式：" prop="phone">
            <el-input v-model="intentionData.phone"></el-input>
          </el-form-item>
          <el-form-item label="用途：" prop="application">
            <el-input v-model="intentionData.application"></el-input>
          </el-form-item>
          <el-form-item label="农作物名称：" prop="item">
            <el-input v-model="intentionData.item"></el-input>
          </el-form-item>
          <el-form-item label="种植面积(单位：亩)：" prop="area">
            <el-input v-model="intentionData.area"></el-input>
          </el-form-item>
          <el-form-item label="意向借款期：" prop="repaymentPeriod">
            <el-select v-model="value" placeholder="意向借款期：">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="住址：" prop="address">
            <el-input v-model="intentionData.address"></el-input>
          </el-form-item>
        </el-form>
  
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeAdd">取 消</el-button>
          <el-button type="success" @click="updateIntention1">确 定</el-button>
        </span>
      </el-dialog>
  
      <div class="title">
        <br />
        <strong>推荐融资人</strong>
      </div>
  
      <div class="goods-box">
        <div
          class="goods"
          v-for="(item, index) in allRecommendData"
          :key="index"
          @click="detailsClick(item.userName)"
          :style="'margin-right:10px;'"
        >
          <img
            class="goods-img"
            src="../assets/img/wutu.gif"
            style="border: 1px solid #f2f2f2"
          />
  
          <div class="info">
            <span class="initiator1" @click="detailsClick(item.userName)">姓名：{{ item.realName }}</span><br />
            <span class="initiator2" @click="detailsClick(item.userName)">联系方式：{{ item.phone }}</span><br />
            <span class="initiator3" @click="detailsClick(item.userName)">地址：{{ item.address }}</span><br />
            <span class="initiator4" @click="detailsClick(item.userName)">农作物：{{ item.item }}</span><br />
            <span class="initiator4" @click="detailsClick(item.userName)" v-if="item.amount !== -1">金额：{{ item.amount }}元</span>
            <span class="initiator4" @click="detailsClick(item.userName)" v-else>金额：- 元</span><br />
            <span class="initiator4" @click="detailsClick(item.userName)" v-if="item.area !== -1">种植面积：{{ item.area }} 亩</span>
            <span class="initiator4" @click="detailsClick(item.userName)" v-else>种植面积：- 亩</span>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { ElMessage } from 'element-plus';
  import { selectIntention, insertIntention, updateIntention, deleteIntention, selectRecommned } from "../api/finance";
  
  // 定义响应式数据
  const options = [
    { value: 6, label: "六个月" },
    { value: 12, label: "一年" },
    { value: 24, label: "两年" },
    { value: 36, label: "三年" },
  ];
  
  const value = ref('');
  const intentionData = ref({
    realName: "",
    amount: null,
    application: "",
    item: "",
    repaymentPeriod: "",
    address: "",
    area: "",
    phone: "",
  });
  const allIntentionData = ref([]);
  const allRecommendData = ref([]);
  const showAdd = ref(false);
  const look = ref(false);
  const title = ref("添加融资意向");
  
  // 定义方法
  const getAllRecommned = async () => {
    try {
      const res = await selectRecommned();
      allRecommendData.value = res.data;
    } catch (err) {
      console.log(err);
    }
  };
  
  const getAllIntention = async () => {
    try {
      const res = await selectIntention();
      allIntentionData.value = res.data;
    } catch (err) {
      console.log(err);
    }
  };
  
  const handleAdd = () => {
  showAdd.value = true;
  console.log("showAdd:", showAdd.value); // 检查 showAdd 的值
};
  
  const lookIntention = () => {
    look.value = !look.value;
    // if (look.value) {
    //   showAdd.value = true;
    //   title.value = "查看融资意向";
    //   if (allIntentionData.value.length > 0) {
    //     intentionData.value = { ...allIntentionData.value[0] };
    //   } else {
    //     intentionData.value = {}; // 如果没有数据，初始化为空对象
    //   }
    // }
  };
  
  const closeAdd = () => {
  showAdd.value = false;
  intentionData.value = {};
  console.log("showAdd:", showAdd.value); // 检查 showAdd 的值
};
  
  const updateIntention1 = async () => {
    // 验证字段是否为空
    if (!intentionData.value.amount || !intentionData.value.application || !intentionData.value.phone || !intentionData.value.item || !intentionData.value.area || !value.value || !intentionData.value.address) {
      ElMessage.error("所有字段都不能为空");
      return;
    }
  
    // 验证字段类型和格式
    // if (typeof intentionData.value.amount !== 'number' || typeof intentionData.value.application !== 'string' || typeof intentionData.value.phone !== 'string' || typeof intentionData.value.item !== 'string' || typeof intentionData.value.area !== 'string' || typeof value.value !== 'number' || typeof intentionData.value.address !== 'string') {
    //   ElMessage.error("输入数据类型不正确");
    //   return;
    // }
  
    try {
      const intentionParams = {
        ...intentionData.value,
        repaymentPeriod: value.value,
      };
  
      let res;
      if (title.value === "编辑意向") {
        
        console.log(title.value);
        res = await updateIntention(intentionParams);
      } else {
        console.log(title.value);
        res = await insertIntention(intentionParams);
      }
      console.log(res);
      
  
      if (res.message=="操作成功") {
        await getAllIntention();
        ElMessage.success(res.message);
        showAdd.value = false;
        await getAllRecommned();
      } else {
        ElMessage.error(res.data);
        showAdd.value = false;
      }
    } catch (error) {
      console.error(error);
      ElMessage.error("系统发生错误，请稍后再试");
    }
  };
  
  const handleEdit = (item) => {
    showAdd.value = true;
    title.value = "编辑意向";
    intentionData.value = { ...item };
  };
  
  const handleDel = async (item) => {
    if (confirm("确认删除该信息?")) {
      try {
        const res = await deleteIntention(item);
        if (res.message=="操作成功") {
          await getAllIntention();
          ElMessage.success(res.message);
        } else {
          ElMessage.error(res.data);
        }
      } catch (error) {
        console.error(error);
        ElMessage.error("删除失败，请稍后再试");
      }
    }
  };
  
  // 生命周期钩子
  onMounted(() => {
    getAllIntention();
    getAllRecommned();
  });
  </script>
  
  <style lang="less" scoped>
  .add-address {
    width: 1100px;
    float: left;
    padding: 20px;
    background: #fff;
    height: auto;
    min-height: 100%;
    .title {
      border-bottom: 1px solid #f2f2f2;
      padding: 10px 0px;
    }
    .goods-box {
      background-color: #f9f9f9;
      width: 1100px;
      margin: 0 auto;
      .goods {
        float: left;
        text-align: center;
        width: 200px;
        height: 220px;
        margin-top: 15px;
        border-radius: 20%;
        padding: 15px;
        background-color: rgb(255, 255, 255);
        border: 1px solid #d3d3d3;
        position: relative;
        cursor: pointer;
        .goods-img {
          width: 80px;
          height: 80px;
          margin-right: 10px;
          border-radius: 100%;
          position: absolute;
          top: 10px;
          left: 60px;
        }
        .info {
          width: 180px;
          top: 80px;
          .initiator1 {
            color: #666;
          }
        }
      }
    }
    .default-address-container {
      border: 1px dashed #ccc;
      border-radius: 6px;
      padding: 10px 20px;
      display: flex;
      margin-top: 20px;
      align-items: center;
      justify-content: space-between;
      .address-item {
        height: 30px;
        margin-right: 50px;
      }
      .right-btn {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        .marginR20 {
          margin-right: 20px;
          cursor: pointer;
          color: #67c23a;
          &:hover {
            color: #035d1c;
            text-decoration: underline;
          }
        }
      }
    }
  }
  
  .details-box2 {
    width: 1100px;
    margin: 10px auto;
    background: #fff;
    min-height: 100%;
    height: auto;
    img {
      width: 300px;
      height: 300px;
      float: left;
      margin-right: 20px;
    }
    .title {
      font-weight: bold;
    }
    .introduce {
      max-height: 100px;
    }
    .item-content {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      height: 30px;
      .item-title {
        font-weight: bold;
      }
      .item-text {
      }
    }
    .info {
      position: relative;
      width: 340px;
      height: 300px;
      float: left;
      .title {
        font-weight: bold;
      }
      .content {
        height: 100px;
      }
      .price {
        color: red;
        font-weight: bold;
      }
      .time {
        margin-top: 10px;
        color: #999;
        .createtime {
          float: left;
        }
        .updatetime {
          float: right;
        }
      }
    }
    .operation {
      position: absolute;
      bottom: 0;
      margin-top: 20px;
      .like,
      .collection,
      .comment {
        display: inline-block;
        width: 30px;
        margin-right: 30px;
        img {
          margin: 0;
          width: 20px;
          height: 20px;
          border-radius: 6px;
        }
      }
    }
    .add-shopcart {
      position: absolute;
      right: 20px;
      bottom: 5px;
    }
  }
  
  .bgc-white {
  width: 500px;
  height: 600px;
  z-index: 1000; /* 确保对话框在最上层 */
}
  </style>